<template>
  <div
    class="container px-4 md:flex md:space-x-5 sm:mt-10 space-y-5 md:space-y-0 mb-10"
  >
    <div class="md:w-48 lg:w-64">
      <nav class="bg-white w-full">
        <ul>
          <li
            v-for="(item, index) in arr"
            :class="[
              'cursor-pointer py-4 px-6 flex border-l-4 hover:bg-gray-dark font-semibold',
              { 'border-yellow': $route.path == item.path },
              { 'border-transparent': $route.path != item.path },
            ]"
            @click="$router.push(item.path)"
          >
            <img class="w-6 h-6 mr-5" :src="item.img" /><span
              >{{ item.title }}
            </span>
          </li>
        </ul>
      </nav>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
import router from "@/router";

export default {
  data() {
    return {
      arr: [
        {
          title: "My Account",
          img: "https://www.lucksec.cn/img/account.7583a1dd.svg",
          path: "/user-center/account",
        },
        {
          title: "My Items",
          img: "https://www.lucksec.cn/img/inven.09bac493.svg",
          path: "/user-center/inventory",
        },
        {
          title: "Transaction History",
          img: "https://www.lucksec.cn/img/address.181e1696.svg",
          path: "/user-center/trade-history",
        },
        {
          title: "Delivery Record",
          img: "https://www.lucksec.cn/img/delivery.d642806a.svg",
          path: "/user-center/delivery-record",
        },
      ],
    };

  },
  methods: {},
};
</script>
<style lang="" scoped></style>
